<template>
  <div id="login">
    <div class="loginContent">
      <div class="recordNumber">备案号：沪ICP备17005724号-8</div>
      <div class="loginBox">
        <div class="logo"></div>
        <div class="title"></div>
        <ul class="type clearfix">
          <li v-for="item in typeList" :key="item.id" :class="{'fl': true, 'cp': true, 'select': item.ifSelect}" @click="changeType(item.id)">{{ item.name }}</li>
        </ul>
        <password v-if="ifPasswordOrCode" ref="mobile"></password>
        <mobile v-else ref="mobile"></mobile>
        <p class="word">
          登录即同意<a href="https://hfsession.com/agreement/" class="userProtocol cp">《用户协议》</a>及<span class="secretProtocol cp">《隐私协议》</span>
        </p>
      </div>
    </div>
    <img-check-dialog ref="imgDialog"></img-check-dialog>
  </div>
</template>

<script>
import password from './components/password'
import mobile from './components/mobile'
export default {
  data () {
    return {
      typeList: [
        {
          id: 0,
          name: '密码登录',
          ifSelect: true
        },
        {
          id: 1,
          name: '验证码登录',
          ifSelect: false
        }
      ]
    }
  },
  computed: {
    // 判断展示密码登录/验证码登录
    ifPasswordOrCode () {
      if (this.typeList.some(item => item.id === 0 && item.ifSelect)) {
        return true
      } else {
        return false
      }
    },
    // 判断图形验证码组件显示隐藏
    showImgDialog () {
      return this.$store.state.common.showImgDialog
    }
  },
  watch: {
    showImgDialog: {
      handler (val) {
        if (val) {
          this.$refs.imgDialog.getPhone(this.$refs.mobile.mobile)
        }
      }
    }
  },
  components: {
    password,
    mobile
  },
  methods: {
    // 切换登录方式
    changeType (id) {
      this.typeList.forEach(item => {
        item.ifSelect = false
        if (item.id === id) {
          item.ifSelect = true
        }
      })
    }
  },
  created () {
    this.tools.storage.removeHfSession()
    this.$store.commit('user/set_state')
    this.$store.state.socket.webSocket && this.$store.state.socket.webSocket.close()
  }
}
</script>

<style scoped lang="scss">
#login {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f6f7fb;
  .loginContent {
    position: absolute;
    min-width: 1560PX;
    min-height: 864PX;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../../assets/Login/images/background.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .recordNumber {
      position: absolute;
      left: 414px;
      bottom: 20px;
      font-size: 12px;
      color: rgba(255,255,255,0.50);;
    }

    .loginBox {
      position: absolute;
      width: 560PX;
      height: 864PX;
      background-color: #fff;
      right: 0;
      padding: 0 80PX;

      .logo {
        width: 84PX;
        height: 84PX;
        background-image: url('../../assets/Login/images/logo.png');
        background-size: 100% 100%;
        margin: 72PX auto 22PX;
      }

      .title {
        width: 60PX;
        height: 36PX;
        background-image: url('../../assets/Login/images/title.png');
        background-size: 100% 100%;
        margin: 0 auto;
      }

      .type {
        margin-top: 24PX;
        margin-bottom: 30PX;
        li {
          width: 200PX;
          height: 48PX;
          text-align: center;
          line-height: 48PX;
          color: #5F7196;
          font-size: 16PX;
        }
        .select {
          color: #273553;
          font-weight: 500;
        }
      }

      .word {
        font-size: 12PX;
        margin: 210PX auto 0;
        text-align: center;
        .userProtocol, .secretProtocol {
          font-size: 12PX;
          color: #304EEC;
        }
      }
    }
  }
}
</style>
